<template>
   <div  class="app-container">
      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
         <el-form-item label="" prop="type">
            <el-select
               v-model="queryParams.type"
               placeholder="业务类型"
               clearable
               style="width: 240px"
            >
               <el-option
                  v-for="dict in loanType"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
               />
            </el-select>
         </el-form-item>
         <el-form-item label="" prop="status">
            <el-select
               v-model="queryParams.status"
               placeholder="审核状态"
               clearable
               style="width: 240px"
            >
               <el-option
                  v-for="dict in statuesType"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
               />
            </el-select>
         </el-form-item>
         <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
         </el-form-item>
      </el-form>
      <el-row :gutter="10" class="mb8">
      <right-toolbar
        v-model:showSearch="showSearch"
        @queryTable="getList"
        :columns="columns"
      ></right-toolbar>
    </el-row>
      <el-table
         v-loading="loading"
         :data="auditList"
         border 
      >
      <el-table-column label="排序"    align="center" width="120">
        <template #default="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
         <el-table-column prop="id" align="center" label="产品编号"  v-if="columns[0].visible"/>
         <el-table-column prop="name" align="center" label="产品名称"  v-if="columns[1].visible"/>
         <el-table-column prop="typeName" align="center" label="业务类型"  v-if="columns[2].visible"/>
         <el-table-column label="标签" align="center" prop="label"  v-if="columns[3].visible">
          <template #default="scope">
            <div>新品：{{scope.row.labelNew}}</div>
         <div>推荐：{{scope.row.labelRecomed}}</div>
         <!-- <div>精品：{{scope.row.labelBout}}</div> -->
      </template>
        </el-table-column>
         <el-table-column prop="statusName" align="center" label="审核状态"  v-if="columns[4].visible"/>
         <el-table-column prop="ss" align="center" label="发布状态"  v-if="columns[5].visible"/>
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-tooltip content="查看" placement="top" >
                <el-button link type="primary" icon="View"  @click="handleUpdate(scope.row)" ></el-button>
              </el-tooltip>
              <el-tooltip content="审核" placement="top" >
                <el-button link icon="Finished" type="primary" v-if="scope.row.status=='1'"  @click="handleAduit(scope.row)" ></el-button>
              </el-tooltip>
            </template>
         </el-table-column>
      </el-table>
      <pagination
               v-show="total > 0"
               :total="total"
               v-model:page="queryParams.page_size"
               v-model:limit="queryParams.page_count"
               @pagination="getList"
            />
      <!-- 产品审核 -->
      <el-dialog title="产品审核" v-model="checkShow" width="600px" append-to-body>
         <el-form ref="deptRef" :model="form" :rules="rules" label-width="80px">
            <el-row>
               <el-col :span="12">
                  <el-form-item label="产品名称" prop="loanName">
                     <el-input disabled v-model="form.loanName" placeholder="请输入部门名称" />
                  </el-form-item>
               </el-col>
            </el-row>
            <el-row>
               <el-col :span="16">
                  <el-form-item label="审核结论" prop="audit">
                     <el-radio-group v-model="form.audit">
                     <el-radio label="1"  value="1" >审核通过</el-radio>
                     <el-radio label="2" value="2">审核不通过</el-radio>
                     </el-radio-group>
                  </el-form-item>
               </el-col>

            </el-row>
               <el-row>
               <el-col :span="12">
                  <el-form-item label="反馈详情" prop="details">
                     <el-input v-model="form.details" rows="5" type="textarea" placeholder="请输入内容" maxlength="20" />
                  </el-form-item>
               </el-col>
            </el-row>
         </el-form>
         <template #footer>
            <div class="dialog-footer">
               <el-button type="primary" @click="submitForm">确 定</el-button>
               <el-button @click="cancel">取 消</el-button>
            </div>
         </template>
      </el-dialog>
    </div>
</template>

<script setup name="Dept">
import {
  listProduct,
  auditProduct
} from "@/api/product/product";
import { useRouter } from "vue-router";
const auditList = ref([]); 
const { proxy } = getCurrentInstance();
const checkShow = ref(false);
const loading = ref(false);
const showSearch = ref(true);
const router = useRouter()
const total = ref(0);//总条数
// 列显隐信息
const columns = ref([
  { key: 0, label: `产品编号`, visible: true },
  { key: 1, label: `产品名称`, visible: true },
  { key: 2, label: `业务类型`, visible: true },
  { key: 3, label: `标签`, visible: true },
  { key: 4, label: `审核状态`, visible: true },
  { key: 4, label: `发布状态`, visible: true },
]);
const loanType = ref([
    {
      value:"1",
    label:"个人信用"
  },{
    value:"2",
    label:"个人分期"
    },{
    value:"3",
    label:"个人分期"
    },{
    value:"4",
    label:"个人抵押"
    },{
    value:"5",
    label:"企业信用"
    },{
    value:"6",
    label:"企业分期"
    },{
    value:"7",
    label:"企业租赁"
    }
])
const statuesType = ref([
  {
    value: "",
    label: "全部"
  },
  {
    value: "1",
    label: "未审核"
  },
  {
    value: "2",
    label: "审核未通过"
  },
  {
    value: "3",
    label: "已审核"
  }
]);
//状态
const statuesAllType = ref([
  {
    value: "",
    label: "全部",
  },
  {
    value: "1",
    label: "未审核",
  },
  {
    value: "2",
    label: "审核未通过",
  },
  {
    value: "3",
    label: "已审核",
  },
  {
    value: "4",
    label: "发布中",
  },
  {
    value: "5",
    label: "已下架",
  },
]);
const data = reactive({
  form: {},
  queryParams: {
   page_size: 1,
    page_count: 10,
    status: undefined,
    type: undefined,
  },
  rules: {
    audit: [{ required: true, message: "请选择审核结论", trigger: "blur" }],
    email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
    phone: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }]
  },
});

const { queryParams, form, rules } = toRefs(data);

/** 查询担保产品审核列表 */
function getList() {
   loading.value = true;
  listProduct(queryParams.value).then((response) => {
    loading.value = false;
    auditList.value = [];
    if (response.data.total_page > 0) {
      response.data.list.forEach(item => {
        if(item.status=='1'||item.status=='2'||item.status=='3'){
          item.typeName = loanType.value.filter((itm) => {
            return itm.value == item.type;
          })[0].label;
            item.statusName = statuesAllType.value.filter((tm) => {
              return tm.value == item.status;
            })[0].label;
            if(item.label){
                item.labelNew = item.label.indexOf('新品')!=-1?'是':'否';
                item.labelRecomed = item.label.indexOf('推荐')!=-1?'是':'否';
                item.labelBout = item.label.indexOf('精品')!=-1?'是':'否';
            }else{
                item.labelNew = '否';
                item.labelRecomed = '否';
                item.labelBout = '否';
            }
            auditList.value.push(item);
        }
      });
    } else {
      auditList.value = [];
    }
    total.value = auditList.value.length;
  });
}
/** 取消按钮 */
function cancel() {
  checkShow.value = false;
  reset();
}
/** 表单重置 */
function reset() {
  form.value = {
    loan_id: undefined,
    audit: '',
    loanName: undefined,
    details: undefined
  };
  proxy.resetForm("deptRef");
}
/** 搜索按钮操作 */
function handleQuery() {
   queryParams.value.page_size = 1;
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();  
}
getList();
/**审核担保产品*/
function handleAduit(row){
   reset();
   checkShow.value = true;
   form.value.loan_id = row.id
    form.value.loanName = `[${row.id}]${row.name}`
}
/** 查看按钮操作 */
function handleUpdate(row) {
  router.push({
    path:"/product-factory/addAudit",
    query:{
      ids:row.id,
    }
  })

}
/** 提交按钮 */
function submitForm() {
  proxy.$refs["deptRef"].validate(valid => {
    if (valid) {
      auditProduct(form.value).then(response => {
          proxy.$modal.msgSuccess("审核成功");
          checkShow.value = false;
          getList();
        });
    }
  });
}
onActivated(()=>{
  let timer = setTimeout(()=>{
     getList();
     clearTimeout(timer)
   },1100)
 })
</script>
